<template>
    <div>
        <el-form :inline="true" :model="form">
            <el-form-item label="提现用户">
                <el-input size="mini" placeholder="请输入提现用户" v-model="form.keyword" />
            </el-form-item>
            <el-form-item label="状态">
                <el-select size="mini" v-model="form.status" placeholder="状态" clearable>
                    <el-option label="全部" value="0"></el-option>
                    <el-option label="待审核" value="1"></el-option>
                    <el-option label="成功" value="2"></el-option>
                    <el-option label="失败" value="3"></el-option>
                    <el-option label="拒绝" value="4"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="申请日期">
                <el-date-picker
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    size="mini"
                    v-model="tkCreatedAt"
                    type="daterange"
                    align="right"
                    unlink-panels
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :picker-options="pickerOptions">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button size="mini" type="primary" @click="handleFilter">查询</el-button>
                <!-- <el-button class="ml10" size="mini" @click="exportExcel">导出</el-button> -->
            </el-form-item>
        </el-form>
        <el-table ref="dataTable" :height="tableHeight" :data="list"
                        @sort-change="tblSort"
                style="width: 100%">
            <el-table-column align="left" label="订单状态" width="130">
                <template slot-scope="scope">
                    <span>{{scope.row.statusText}}</span>
                </template>
            </el-table-column>
            <el-table-column align="left" label="申请日期" width="200" sortable="custom" prop="create_time">
                <template slot-scope="scope">
                    <span>{{scope.row.createTime}}</span>
                </template>
            </el-table-column>
            <el-table-column align="left" label="申请用户" width="100">
                <template slot-scope="scope">
                    <span>{{scope.row.memberName}}</span>
                </template>
            </el-table-column>
            <el-table-column align="left" label="手机号" width="150">
                <template slot-scope="scope">
                    <span>{{scope.row.memberMobile}}</span>
                </template>
            </el-table-column>
            <el-table-column align="right" label="申请金额" width="100" sortable="custom" prop="amount">
                <template slot-scope="scope">
                    <span>￥{{scope.row.amount}}</span>
                </template>
            </el-table-column>
            <el-table-column align="right" label="税率" width="100" sortable="custom" prop="rate">
                <template slot-scope="scope">
                    <span>{{scope.row.rate}}</span>
                </template>
            </el-table-column>
            <el-table-column align="right" label="税额" width="100" sortable="custom" prop="fee">
                <template slot-scope="scope">
                    <span>￥{{scope.row.fee}}</span>
                </template>
            </el-table-column>
            <el-table-column align="right" label="实付金额" width="100" sortable="custom" prop="actual_amount">
                <template slot-scope="scope">
                    <span>￥{{scope.row.actualAmount}}</span>
                </template>
            </el-table-column>
            <el-table-column align="left" label="提现类型" width="130">
                <template slot-scope="scope">
                    <span>{{scope.row.withdrawTypeText}}</span>
                </template>
            </el-table-column>
            <el-table-column align="left" label="提现账户" width="180">
                <template slot-scope="scope">
                    <span>{{scope.row.withdrawAccount}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="付款时间" width="150" sortable="custom" prop="pay_date">
                <template slot-scope="scope">
                    <span>{{scope.row.payDate}}</span>
                </template>
            </el-table-column>
            <el-table-column align="left" label="备注" width="130">
                <template slot-scope="scope">
                    <span>{{scope.row.reason}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="100">
                <template slot-scope="scope">
                    <el-button v-if="scope.row.canOk==1" type="text" @click="handleDetail(scope.row)">处理</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination-container">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="form.pageNum" :page-sizes="[20,30, 50]" :page-size="form.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination>
        </div>

    
        <el-dialog title="处理提现申请" :visible.sync="dialogDetailVisible" :close-on-click-modal="false" width="600px">
            <el-form :rules="rules" :model="orderForm" ref="orderForm" label-width="80px">
                <el-form-item label="处理方式" prop="type">
                    <el-radio-group v-model="orderForm.type">
                        <el-radio :label="1">通过</el-radio>
                        <el-radio :label="2">拒绝</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="备注" prop="reason">
                    <common-input type="textarea" :autosize="{ minRows: 3, maxRows: 5}" placeholder="" maxlength="100" v-model="orderForm.reason" />
                </el-form-item>
            </el-form>
            
            
            <div slot="footer" class="dialog-footer">
                <el-button size="mini" @click="dialogDetailVisible=false">取消</el-button>
                <el-button :loading="orderLoading" size="mini" type="primary" @click="doSync()">处理</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    import {
        withdraw_list,
        withdrawOperate
    } from '../../api/member';

    export default {
        name: 'withdraw-list',
        components: {
        },
        props: {
            formData: Object
        },
        computed: {
        },
        watch: {
            formData: {
                immediate: true,
                handler (val) {
                    this.form.orderStatus = val.order_status;

                    this.getList();
                }
            }
        },
        data() {
            return {
                rules: {
                    type: [
                        {
                            required: true,
                            message: '请选择处理方式',
                            trigger: 'blur'
                        }
                    ],
                },
                orderLoading: false,
                orderForm: {
                    type: undefined,
                    reason: undefined,
                    id: undefined,
                },
                orderDate: undefined,
                dialogSyncVisible: false,
                pickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                tkCreatedAt: undefined,
                ids: [],
                rewardList: [],
                dialogDetailVisible: false,
                tableHeight: 200,
                form: {
                    status: "0",
                    startDate: undefined,
                    endDate: undefined,
                    pageNum: 1,
                    pageSize: 20,
                    orderCol: undefined,
                    orderAsc: undefined,
                    keyword: undefined,
                },
                list: [],
                total: 0,
            }
        },
        created() {
            this._getTableHeight();
        },
        mounted() {
            const that = this

            window.onresize = () => {

                return (() => {

                    that._getTableHeight()

                })()
            }
        },
        methods: {
            doSync() {
                const set = this.$refs;
                set["orderForm"].validate(valid => {
                    if (valid) {
                        this.orderLoading = true;
                        withdrawOperate(this.orderForm)
                            .then(() => {
                                this.orderLoading = false;
                                this.dialogDetailVisible = false;
                                this.getList();
                                this.$message.success("提现申请已处理");
                            }).catch((err)=>{
                                this.orderLoading = false;
                            })
                    } else {
                        return false;
                    }
                });
            },
            sync() {
                this.orderForm.platform = undefined;
                this.orderForm.startDate = undefined;
                this.orderForm.endDate = undefined;
                this.orderDate = undefined;

                this.dialogSyncVisible = true;
            },
            selectChange(selection) {
                this.ids = [];
                if(selection && selection.length > 0) {
                    selection.forEach((item)=>{
                        this.ids.push(item.id)
                    })
                }
                // console.log(this.ids)
            },
            clear() {
                this.$refs.dataTable.clearSelection();
            },
            exportExcel() {

            },
            _getTableHeight() {
                this.tableHeight = window.innerHeight - 280
            },
            tblSort(d) {
                this.form.orderCol = d.prop;
                this.form.orderAsc = d.order;

                this.handleFilter();
            },
            handleFilter() {
                this.form.pageNum = 1;
                this.getList();
            },
            handleSizeChange(val) {
                this.form.pageSize = val;
                this.getList();
            },
            handleCurrentChange(val) {
                this.form.pageNum = val;
                this.getList();
            },
            getList() {
                if(this.tkCreatedAt) {
                    this.form.startDate = this.tkCreatedAt[0];
                    this.form.endDate = this.tkCreatedAt[1];
                }
                withdraw_list(this.form).then(response => {
                    this.list = response.data.list;
                    this.total = response.data.total;
                })
            },
            getStatusColor(row) {
                if(row.profitStatus == 5) {
                    return "success"
                }

                return "danger"
            },
            handleDetail(row) {
                this.orderForm.id = row.id;
                this.orderForm.type = undefined;
                this.orderForm.reason = undefined;
                this.dialogDetailVisible = true;
            },
            handleSettle(row) {
                let ids = [];
                if(row && row.id > 0) {
                    ids.push(row.id);
                } else {
                    ids = this.ids;
                }

                if(!ids || ids.length < 1) {
                    this.$message.error("请选择要结算的订单");
                } else {
                    this.$confirm('确定结算?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    })
                        .then(() => {
                            retail_order_settle(ids).then((res)=>{
                                this.$message.success("所选项已结算");

                                this.getList();
                            }).catch((err)=>{

                            })
                        }).catch(()=>{});
                }

            },
            handleIn(row) {
                let ids = [];
                if(row && row.id > 0) {
                    ids.push(row.id);
                } else {
                    ids = this.ids;
                }

                if(!ids || ids.length < 1) {
                    this.$message.error("请选择要入账的订单");
                } else {
                    this.$confirm('确定入账?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    })
                        .then(() => {
                            retail_order_in(ids).then((res)=>{
                                this.$message.success("所选项已入账");

                                this.getList();
                            }).catch((err)=>{

                            })
                        }).catch(()=>{});
                }

            },
            handleSend(row) {
                
            }

        }
    }
</script>
<style lang="scss" scoped>
    .cell {
        line-height: 1.5;
        padding: 0 2px;

        .order-img-box {
            margin-left: 10px;
            margin-bottom:10px;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            text-align: left;
            -webkit-box-pack: justify;
            -ms-flex-pack: justify;
            justify-content: space-between;

            .order-no {
                margin-bottom: 10px;
                font-size:14px;
            }

            .title-img {
                position: relative;
                border-radius: 4px;
                overflow-y: hidden;

                .img-text-box {
                    margin-left: 10px;
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: flex;
                    -webkit-box-align: center;
                    -ms-flex-align: center;
                    align-items: center;

                    .img {
                        width: 100px;
                        height: 100px;
                        border-radius: 4px;
                        margin-right: 10px;
                    }

                    .img-text {
                        width: 240px;
                        height: 36px;
                        line-height: 18px;
                        margin-bottom: 10px;
                    }

                    .btn-text {
                        width: auto;
                        height: 18px;
                        background: rgba(51,51,51,.1);
                        font-size: 12px;
                        padding: 2px 4px;
                    }
                }
            }
        }
    }
</style>